<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>英文学习</title>
    <link rel="stylesheet" type="text/css" th:href="@{/static/css/ShowEnglishWorld.css}" >
    <script src="webjars/jquery/3.5.0/jquery.min.js"></script>
</head>
<body>
    <div class="btn">
        <button onclick="reloads()">刷新</button>
    </div>
    <div class="xbHead" th:each="item:${list}">
        用户名:<a th:text="${item.getUserName()}" id="userName"></a>
        等级:<a th:text="${item.getSwordLevel()}" id="level"></a>
        升级所需经验:<a th:text="${item.getSwordLevelCache()}" id="levelCache"></a>
        战斗力:<a th:text="${item.getSwordNum()}" id="swordNum"></a>
    </div>
    <div class="xbWorld" onclick="showDiv()" id="start">
        <a>::::</a>
        <br/>
        <a>开始</a>
        <br/>
        <a>::::</a>
    </div>
    <div th:each="item1:${list1}" class="xbWorld hide" th:id="${item1.getWordId()}" onclick="showDiv()">
        <a>五秒后显示翻译</a>
        <br/>
        <a>::::</a>
        <br/>
        英语:<a th:text="${item1.getWordEnglish()}"></a>
        <br/>
        翻译:<a th:text="${item1.getWordChinese()}"  th:id="show+${item1.getWordId()}" style="display: none"></a>
    </div>
</body>
<script>
    function reloads(){
        location.reload();
    }
    var num = 0;
    var newNum = 0;
    // 放置已经出现过的英语单词
    var nums = new Array();
    var lengthNum = 0;
    function showDiv() {
        console.log("hide是" + document.querySelectorAll("div.hide").length);
        lengthNum = document.querySelectorAll("div.hide").length;
        document.getElementById('start').style.display = "none";
        newNum = Math.floor(Math.random() * (document.querySelectorAll("div.hide").length - 1)) + 1;
        // newNum和num不能在nums中
        if (!nums.length == 0) {
            while (nums.includes(newNum)) {
                newNum = Math.floor(Math.random() * (document.querySelectorAll("div.hide").length - 1)) + 1;
            }
        }
        // num是不存在的情况下
        if (!num) {
            num = Math.floor(Math.random() * (document.querySelectorAll("div.hide").length - 1)) + 1;
            if (!nums.length == 0) {
                while (nums.includes(num)) {
                    num = Math.floor(Math.random() * (document.querySelectorAll("div.hide").length - 1)) + 1;
                }
            }
            document.getElementById(num).style.display = "block";
            setTimeout(
                function () {
                    document.getElementById('show' + num).style.display = "block"
                }, "5000"
            );
            nums.push(num);
        } else {
            document.getElementById(num).style.display = "none";
            document.getElementById(newNum).style.display = "block";
            // 显示 隐藏
            setTimeout(
                function () {
                    document.getElementById('show' + newNum).style.display = "block"
                }, "5000"
            );
            nums.push(newNum);
            num = newNum;
        }
        // 如果淘汰数组中的个数比总个数差小于十个
        if (nums.length > (lengthNum - 10)) {
            // 数组第一个是隐藏
            document.getElementById('show' + nums[0]).style.display = "none";
            // 释放数组中第一个元素
            setTimeout(
                function () {
                    // 第一个元素代表的翻译设置为隐藏
                    nums = nums.splice(1, 1);
                }, "1000000"
            )
        } else {
            // 数组第一个是隐藏
            document.getElementById('show' + nums[0]).style.display = "none";
            // 释放数组中第一个元素
            setTimeout(
                function () {
                    // 第一个元素代表的翻译设置为隐藏
                    nums = nums.splice(1, 1);
                }, "1"
            )
        }

        $.ajax({
            url: "addSword",
            type: "get",
            dataType: "json",
            success: function (data) {
                console.log("data is:" + data[0].userName)
                $(level).html(data[0].swordLevel);
                $(levelCache).html(data[0].swordLevelCache);
                $(swordNum).html(data[0].swordNum);
            }
        })
    }
</script>
</html>